<!DOCTYPE HTML>
<!--
	Striped 2.5 by HTML5 Up!
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
    <title>AntBlog 博客</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <!--    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700"-->
    <!--          rel="stylesheet"/>-->

    <link type="text/css" rel="stylesheet" href="css/ant/page.css">
    <link type="text/css" rel="stylesheet" href="css/docs/neko-framework/external-plugins/external-plugins.min.css">
    <link type="text/css" rel="stylesheet" href="css/docs/neko-framework/css/layout/neko-framework-layout.css">
    <link type="text/css" rel="stylesheet" id="color" href="css/docs/neko-framework/css/color/neko-framework-color.css">
    <link type="text/css" rel="stylesheet" href="css/common-style.css">

    <script src="js/jquery.min.js"></script>

    <script src="js/skel.min.js"></script>
    <script src="js/skel-panels.min.js"></script>
    <script src="js/home/init.js"></script>
    <style>
        .header_container {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }

        hr {
            border: 1px dashed #d2d1d1;
            padding: 0;
            margin: 6em 0 0 0;
        }

        #content-inner {
            min-height: 100em;
        }

        .container {
            width: 100% !important;
        }

        html {
            overflow: hidden;
        }

        #wrapper {
            margin: 2em 0 0 0;
        }

        #wrapper #sidebar {
            padding: 2em 1.35em 1em 1.15em;
        }

        .pager span.current {
            background-color: #364050;
        }

        #content-inner .tui-editor-contents h2 {
            margin: 0.5em 0;
        }

        #content-inner .tui-editor-contents h3 {
            margin: 0.2em 0;
        }
    </style>

</head>
<!--
    Note: Set the body element's class to "left-sidebar" to position the sidebar on the left.
    Set it to "right-sidebar" to, you guessed it, position it on the right.
-->
<body class="left-sidebar">

<div class="headerPage"></div>
<div id="app">


    <!-- Wrapper -->
    <div id="wrapper ">

        <!-- Content -->
        <div id="content">
            <div id="content-inner">

                <!-- Post -->

                <article class="is-post is-post-excerpt" v-for="docItem in docList" :key="docItem.id">
                    <header>
                        <h2 class="must"><a :href="'blog-view.html?key='+docItem.id">{{docItem.contentTitle}}</a></h2>
                        <span class="byline">{{docItem.contentInfo}}</span>
                    </header>
                    <div class="info">
                        <span class="date">{{docItem.createDate}}</span>
                        <ul class="stats">
                            <li><a href="#" class="fa fa-comment">{{docItem.contentStart}}</a></li>
                            <li><a href="#" class="fa fa-heart">{{docItem.contentStart}}</a></li>
                            <li><a href="#" class="fa fa-twitter">{{docItem.contentHot}}</a></li>
                        </ul>
                    </div>
                    <!--                    <a href="#" class="image image-full"><img src="./static/images/portfolio/cabin.png" alt=""/></a>-->
                    <div :id="forId(docItem.id)"></div>
                    <!--                    <p v-for="item in docItem.desc">{{item}}</p>-->
                    <hr/>
                </article>

                <!-- Pager -->
                <div id="pager" class="pager clearfix"></div>
            </div>
        </div>

        <!-- Sidebar -->
        <div id="sidebar">

            <!-- Nav -->
            <nav id="nav">
                <ul>
                    <li v-bind:class="{ current_page_item:'new'==typeClass}" v-on:click="selectType('new')"><a href="#">最新文档</a>
                    </li>
                    <li v-bind:class="{ current_page_item:'hot'==typeClass}" v-on:click="selectType('hot')"><a href="#">最热文档</a>
                    </li>
                    <li v-bind:class="{ current_page_item:'start'==typeClass}" v-on:click="selectType('start')"><a
                            href="#">点赞最多</a></li>
                </ul>
            </nav>

            <!-- Search -->
            <section class="is-search">
                <form method="post" action="#">
                    <input type="text" class="text" name="search" placeholder="Search(暂不支持)"/>
                </form>
            </section>

            <!-- 文档模块 -->
            <section class="is-recent-posts">
                <header>
                    <h2>闲文</h2>
                </header>
                <ul>
                    <li v-for="item in orderList" v-on:click="selectType('new')"><a
                            :href="'blog-view.html?key='+item.id">{{item.contentTitle}}</a></li>
                </ul>
            </section>

            <!-- 热门文章 -->
            <section class="is-recent-comments">
                <header>
                    <h2>系列合集</h2>
                </header>
                <ul>
                    <li v-for="item in popularList" v-on:click="selectType('new')"><a
                            :href="'blog-view.html?type='+item.typeCode">{{item.typeName}}</a></li>
                    <li><a href="blog-docs.html"> 查看更多...</a></li>
                </ul>
            </section>


            <!--            &lt;!&ndash; Calendar &ndash;&gt;-->
            <!--            <section class="is-calendar">-->
            <!--                <div class="inner">-->
            <!--                    <table>-->
            <!--                        <caption>February 2013</caption>-->
            <!--                        <thead>-->
            <!--                        <tr>-->
            <!--                            <th scope="col" title="Monday">M</th>-->
            <!--                            <th scope="col" title="Tuesday">T</th>-->
            <!--                            <th scope="col" title="Wednesday">W</th>-->
            <!--                            <th scope="col" title="Thursday">T</th>-->
            <!--                            <th scope="col" title="Friday">F</th>-->
            <!--                            <th scope="col" title="Saturday">S</th>-->
            <!--                            <th scope="col" title="Sunday">S</th>-->
            <!--                        </tr>-->
            <!--                        </thead>-->
            <!--                        <tbody>-->
            <!--                        <tr>-->
            <!--                            <td colspan="4" class="pad"><span>&nbsp;</span></td>-->
            <!--                            <td><span>1</span></td>-->
            <!--                            <td><span>2</span></td>-->
            <!--                            <td><span>3</span></td>-->
            <!--                        </tr>-->
            <!--                        <tr>-->
            <!--                            <td><span>4</span></td>-->
            <!--                            <td><span>5</span></td>-->
            <!--                            <td><a href="#">6</a></td>-->
            <!--                            <td><span>7</span></td>-->
            <!--                            <td><span>8</span></td>-->
            <!--                            <td><span>9</span></td>-->
            <!--                            <td><a href="#">10</a></td>-->
            <!--                        </tr>-->
            <!--                        <tr>-->
            <!--                            <td><span>11</span></td>-->
            <!--                            <td><span>12</span></td>-->
            <!--                            <td><span>13</span></td>-->
            <!--                            <td class="today"><a href="#">14</a></td>-->
            <!--                            <td><span>15</span></td>-->
            <!--                            <td><span>16</span></td>-->
            <!--                            <td><span>17</span></td>-->
            <!--                        </tr>-->
            <!--                        <tr>-->
            <!--                            <td><span>18</span></td>-->
            <!--                            <td><span>19</span></td>-->
            <!--                            <td><span>20</span></td>-->
            <!--                            <td><span>21</span></td>-->
            <!--                            <td><span>22</span></td>-->
            <!--                            <td><a href="#">23</a></td>-->
            <!--                            <td><span>24</span></td>-->
            <!--                        </tr>-->
            <!--                        <tr>-->
            <!--                            <td><a href="#">25</a></td>-->
            <!--                            <td><span>26</span></td>-->
            <!--                            <td><span>27</span></td>-->
            <!--                            <td><span>28</span></td>-->
            <!--                            <td class="pad" colspan="3"><span>&nbsp;</span></td>-->
            <!--                        </tr>-->
            <!--                        </tbody>-->
            <!--                    </table>-->
            <!--                </div>-->
            <!--            </section>-->


            <!--        </div>-->

        </div>
    </div>
</div>
<script src="js/jquery-ui-1.11.0.js"></script>
<script src="js/ant/ant-utils.js"></script>
<script src="js/initCommon.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/restApi.js"></script>
<script src="js/ant/jquery.z-pager.js" type="text/javascript" charset="utf-8"></script>

<script src="js/markdown/toastui-editor-viewer.js"></script>
<script src="js/markdown/toastui-editor-plugin-code.js"></script>

<script src='vue/vue.min.js'></script>


<script>
    function currentPage(currentPage) {
        if (app.currentPage != null && currentPage != app.currentPage) {
            app.$options.methods.forward(null, currentPage, app);
        }
    }
</script>

<script>
    antInit.init("header_home");
    const Editor = toastui.Editor;
    const {codeSyntaxHighlight} = Editor.plugin;
    var default_doc = [{
        id: "0",
        contentTitle: "文章还在处理中",
        contentInfo: "今夕何夕兮，搴舟中流。",
        createDate: "2020-05-17 17:55:26"
    }];
    var app = new Vue({
        el: "#app",
        data: {
            popularList: [],
            orderList: [],
            typeClass: 'new',
            docList: default_doc,
            currentPage: 0,
            update: false
        },
        computed: {},
        methods: {
            forId: function (index) {
                return "view" + index
            },
            forward: function (type, page, app) {
                // 通过 外部JS 调用的 this 不是 Vue 对象
                var $self = app != null ? app : this;
                $self.currentPage = page;
                type = null == type ? $self.typeClass : type;
                restApi.getDocList(type, page, function (backData) {
                    console.log(backData);
                    var contentList = backData.data.records;

                    // 动态设置数据 , 避免死循环
                    // var ajaxSerData = page > 1 ? true : false;

                    // 生成数据
                    $("#pager").zPager({
                        current: page,
                        totalData: backData.data.total,
                        htmlBox: $('#wraper'),
                        btnShow: true,
                        ajaxSetData: false
                    });
                    $self.docList = contentList;
                    $self.update = false;
                });
            },
            showContent() {
                var contentList = this.docList;
                if (contentList == null || contentList.length == 0) {
                    console.log("no content");
                } else {
                    if (!this.update) {
                        for (var item in contentList) {
                            try {
                                const obj = contentList[item];
                                var desc = antUtils.mkExchangeArray(obj['contentForeword']);
                                desc.shift();
                                desc.shift();
                                desc = desc.join('\n');
                                new toastui.Editor({
                                    el: document.querySelector('#view' + obj['id']),
                                    initialValue: desc,
                                    plugins: [codeSyntaxHighlight]
                                });
                            } catch (e) {
                                console.log(e);
                            }
                        }
                        $("#content h2:not(.must)").css("font-size", "1.5em")
                        this.update = true;
                    }

                }


            },
            getCollection: function () {
                var $self = this;
                restApi.getCollectionList(0, function (data) {
                    console.log(data);
                    $self.popularList = data.info.tag.popularCollection;
                });
            },
            getOrderDoc: function () {
                var $self = this;
                restApi.getDocList("order", "0", function (backData) {
                    console.log(backData);
                    var contentList = backData.data.records;
                    $self.orderList = contentList;
                });
            },
            selectType: function (type) {
                this.typeClass = type;
                this.forward(type, this.currentPage);
            },
            selectDoc: function (type) {
                this.typeClass = type;
                this.forward(type);
            },
        },
        watch: {},
        mounted() {
            console.log(antUtils);
            this.forward("new", 1);
            this.getCollection();
            this.getOrderDoc();

        },
        updated() {
            this.showContent();
        },
        directives: {},
        components: {},
        filters: {}
    });

</script>

</body>
</html>
